<template>
    <div class="main">
        <div class="main1">
            <LittleHead>
                <span>总线设备状态</span>
            </LittleHead>
            <!-- 设备总线状态 -->
            <DeviceStatus></DeviceStatus>
            <LittleHead>
                <span>总线上下行数据量</span>
            </LittleHead>
             <DataVolume></DataVolume>
        </div>

        <div class="main2">
             <LittleHead>
                <Head></Head>
                <center></center>
            </LittleHead>
                
        </div>
      
        <div class="main3">
            <LittleHead>
                <span>全部订单</span>
            </LittleHead>
            <!-- 设备总线状态 -->
            <rightup></rightup>
            <LittleHead>
                <span>设备运行状态</span>
            </LittleHead>
            <rightcenter></rightcenter>
            <applist>
                <span>app列表</span>
            </applist>
        </div>
    </div>
</template>

<script>
import LittleHead from "@/components/LittleHead";
import applist from "@/components/applist";
import Head from "@/components/Head";
import center from "@/components/center";
import DeviceStatus from "@/components/comps/DeviceStatus";
import DataVolume from "@/components/comps/DataVolume"
import rightup from "@/components/comps/rightup"
import rightcenter from "@/components/comps/rightcenter"

  
    
    export default {
        name:"Main",
        components:{DeviceStatus,LittleHead,DataVolume,applist,rightup,Head,rightcenter,center}
     
    }
</script>

<style lang="scss" scoped>
.main{
    display: flex;
}
.main1{
    height: 100%;
    width:100%;
    flex:2;
    box-sizing: border-box;
    // background:red;
}
.main2{
    flex:4;
}
.main3{
    flex:2
}
</style>